<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="main data-acquisition__load">
    <h3 class="title">数据导入</h3>
    <p class="description">将原始数据以附件上传的方式传输到平台，为后续形成的数据资产提供溯源依据。</p>
    <!-- <div class="navigation">
      <div class="product-des navigation-item">
        <Warning :size="5" />
        产品简介
      </div>
      <div class="product-txt navigation-item">
        <Document :size="5"/>
        产品文档
      </div>
    </div> -->
    <el-divider></el-divider>
    <div class="card-main">
      <el-row :gutter="12">
        <el-col :span="6" class="custom-margin"> 
          <el-card style="height: 200px;">
            <div class="search-box">
              <el-text class="mx-1">输入关键字进行检索</el-text>
              <div class="input-group" style="cursor: pointer;">
                <el-input
                  v-model="keyword"
                  size="small"
                  placeholder="请输入"
                  :suffix-icon="Search"
                  @change="searchByName"
                />
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6" v-for="(m, index) in modelList" :key="index" class="custom-margin">
          <el-card style="min-height: 200px;" >
            <div class="card-content" @click="openModel(m)">
              <div class="left-log">
                <img :src="modelLog" alt="plus" />
              </div>
              <div class="right">
                <div class="name">{{ m.modelName }}</div>
                <div class="des">{{ m.description }}</div>
              </div>
            </div>
            <template #footer>
              <div class="card-footer">
                <!-- <div class="left"> -->
                  <el-button type="text" size="mini" @click="handleView(m)">数据查看</el-button>
                  <el-button type="text" size="mini" @click="dataImport(m)">数据导入</el-button>
                <!-- </div> -->
              </div>
            </template>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script name="DataAcquisitionDataEntry" setup>
import { Search } from '@element-plus/icons-vue';
import modelLog from '@/assets/images/u165.png';
import { getDatabaseModelCardList } from '@/api/dataAcquisition';
const emit = defineEmits(['handleEvent']);
const loading = ref(false);
const keyword = ref('');
const modelList = ref([]);
const dataImport = (row) => {
  if (row.modelName.indexOf('自然网格模型') > -1) {
    emit('handleEvent', {
      component: 'Import',
      tableName: row.tableName
    });
  } else if (row.modelName.indexOf('自然网格结果库') > -1) {
    emit('handleEvent', {
      component: 'ImportOp2'
    });
  } else {
    emit('handleEvent', {
      component: 'ImportMaterial',
      modelId: row.id
    });
  }
}
const handleView = (row) => {
  if (row.modelName.indexOf('自然网格模型') > -1) {
    emit('handleEvent', {
      component: 'List',
      tableName: row.tableName
    });
  } else if (row.modelName.indexOf('自然网格结果库') > -1) {
    emit('handleEvent', {
      component: 'Op2List'
    });
  } else {
    emit('handleEvent', {
      component: 'MaterialList',
      modelId: row.id
    });
  }
}
const searchByName = () => {
  getModelByParam();
}
const getModelByParam = () => {
  getCardAll(keyword.value)
}
const openModel = (row) => {
  if (row.modelName.indexOf('自然网格模型') > -1) {
    emit('handleEvent', {
      component: 'List',
      tableName: row.tableName
    });
  } else if (row.modelName.indexOf('自然网格结果库') > -1) {
    emit('handleEvent', {
      component: 'Op2List'
    });
  } else {
    emit('handleEvent', {
      component: 'MaterialList',
      modelId: row.id
    });
  }
}
const getCardAll = (modelName) => {
  getDatabaseModelCardList({
    modelName: modelName,
    "pageNum":1,"pageSize":9999
  }).then(res => {
    if (res.code === 200) {
      modelList.value = res.rows;
      loading.value = false;
    }
  }).catch(err => {
    loading.value = false;
  }).finally(() => {
    loading.value = false;
  })
}
onMounted(() => {
  getCardAll('');
});
</script>
<style lang="scss" scoped>
.main {
  height: calc(100vh - 84px);
  overflow: auto;
  width: 100%;
  padding: 0 20px 10px 20px;
  border: 1px solid #f1f1f1;
  .description {
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    height: 30px;
    line-height: 30px;
  }
  .navigation {
    display: flex;
    align-items: center;
    .navigation-item {
      width: 85px;
      margin-right: 10px;
      margin-top: 5px;
      display: flex;
      align-items: center;
      color: #409eff;
      font-size: 14px;
      font-weight: 500;
      svg {
        margin-right: 2px;
      }
    }
  }
  .custom-margin {
    // margin: 10px;
    margin-bottom: 20px;
    .search-box {
      height: 165px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .input-group {
        margin-top: 20px;
      }
    }
    .card-content {
      min-height: 120px;
      display: flex;
      .left-log {
        flex: 0 0 68px;
        img {
          width: 48px;
          height: 48px;
          margin: 10px 0 0 10px;
          background-size: 100% 100%;
        }
      }
      .right {
        flex: 1;
        padding-left: 10px;
        padding-top: 10px;
        .name {
          font-size: 16px;
          font-weight: 600;
          padding-bottom: 10px;
        }
        .des {
          font-size: 14px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.65);
        }
      }
    }
    .card-footer {
      display: flex;
      justify-content: space-between;
      height: 45px;
      line-height: 45px;
      padding: 5px 20px;
    }
  }
}
::v-deep .custom-margin .el-card__footer {
  padding: 0;
}
::v-deep .el-input__suffix {
  cursor: pointer;
}
</style>